Frontend Mikro-Frontend: Module Federation Arxitekturasini Mukammal O'zlashtirish

Bugungi tez rivojlanayotgan veb-dasturlash landshaftida keng ko'lamli frontend ilovalarini yaratish va qo'llab-quvvatlash tobora murakkablashib bormoqda. An'anaviy monolit arxitekturalar ko'pincha kodning haddan tashqari ko'payishi, sekin yig'ish vaqtlari va mustaqil joylashtirishdagi qiyinchiliklar kabi muammolarga olib keladi. Mikro-frontendlar frontendni kichikroq, boshqarilishi oson bo'lgan qismlarga ajratish orqali yechim taklif qiladi. Ushbu maqolada mikro-frontendlarni amalga oshirishning kuchli usuli bo'lgan Module Federation chuqur o'rganilib, uning afzalliklari, arxitekturasi va amaliy qo'llash strategiyalari ko'rib chiqiladi.

Mikro-Frontendlar nima?

Mikro-frontendlar - bu frontend ilovasi kichikroq, mustaqil va joylashtiriladigan birliklarga ajratilgan arxitektura uslubidir. Har bir mikro-frontend odatda alohida jamoaga tegishli bo'lib, bu katta avtonomiyaga va tezroq ishlab chiqish sikllariga imkon beradi. Bu yondashuv backendda keng qo'llaniladigan mikroservislar arxitekturasini aks ettiradi.

Mikro-frontendlarning asosiy xususiyatlariga quyidagilar kiradi:

• Mustaqil Joylashtirish Imkoniyati: Har bir mikro-frontend ilovaning boshqa qismlariga ta'sir qilmasdan mustaqil ravishda joylashtirilishi mumkin.
• Jamoa Avtonomiyasi: Turli jamoalar o'zlarining afzal ko'rgan texnologiyalari va ish jarayonlaridan foydalangan holda turli mikro-frontendlarga egalik qilishlari va ularni ishlab chiqishlari mumkin.
• Texnologiyalar Turfa Xilligi: Mikro-frontendlar turli freymvorklar va kutubxonalar yordamida yaratilishi mumkin, bu esa jamoalarga vazifa uchun eng yaxshi vositalarni tanlash imkonini beradi.
• Izolyatsiya: Mikro-frontendlar zanjir reaktsiyasidagi nosozliklarning oldini olish va barqarorlikni ta'minlash uchun bir-biridan izolyatsiya qilingan bo'lishi kerak.

Nima uchun Mikro-Frontendlardan foydalanish kerak?

Mikro-frontend arxitekturasini qabul qilish, ayniqsa, katta va murakkab ilovalar uchun bir nechta muhim afzalliklarni taqdim etadi:

• Kengaytiriluvchanlikning Yaxshilanishi: Frontendni kichikroq birliklarga ajratish ilovani zaruratga qarab kengaytirishni osonlashtiradi.
• Tezroq Ishlab Chiqish Sikllari: Mustaqil jamoalar parallel ravishda ishlashi mumkin, bu esa tezroq ishlab chiqish va reliz sikllariga olib keladi.
• Jamoa Avtonomiyasining Oshishi: Jamoalar o'z kodlari ustidan ko'proq nazoratga ega bo'lib, mustaqil ravishda qaror qabul qilishlari mumkin.
• Osonroq Texnik Xizmat Ko'rsatish: Kichikroq kod bazalarini qo'llab-quvvatlash va tuzatish osonroq.
• Texnologiyalardan Mustaqillik: Jamoalar o'zlarining maxsus ehtiyojlari uchun eng yaxshi texnologiyalarni tanlashlari mumkin, bu esa innovatsiya va tajribalarga imkon beradi.
• Xatarlarning Kamayishi: Joylashtirishlar kichikroq va tez-tez amalga oshiriladi, bu esa keng ko'lamli nosozliklar xavfini kamaytiradi.

Module Federationga Kirish

Module Federation - bu Webpack 5 da taqdim etilgan xususiyat bo'lib, u JavaScript ilovalariga ish vaqtida boshqa ilovalardan kodni dinamik ravishda yuklash imkonini beradi. Bu haqiqatan ham mustaqil va komponentli mikro-frontendlarni yaratishga imkon beradi. Hamma narsani bitta paketga yig'ish o'rniga, Module Federation turli ilovalarga bir-birining modullarini xuddi mahalliy bog'liqliklardek ulashish va ishlatish imkonini beradi.

Iframe yoki veb-komponentlarga tayanadigan mikro-frontendlarga an'anaviy yondashuvlardan farqli o'laroq, Module Federation foydalanuvchi uchun yanada uzluksiz va integratsiyalashgan tajribani taqdim etadi. U bu boshqa usullar bilan bog'liq bo'lgan ishlash samaradorligining pasayishi va murakkabliklardan qochadi.

Module Federation qanday ishlaydi

Module Federation modullarni "taqdim etish" (exposing) va "iste'mol qilish" (consuming) konsepsiyasiga asoslanadi. Bir ilova ("host" yoki "konteyner") modullarni taqdim etishi mumkin, boshqa ilovalar ("remotes" yoki masofaviy) esa bu taqdim etilgan modullarni iste'mol qilishi mumkin. Jarayonning tavsifi:

1. Modullarni Taqdim Etish: Webpack'da "masofaviy" (remote) ilova sifatida sozlangan mikro-frontend ma'lum modullarni (komponentlar, funksiyalar, yordamchi dasturlar) konfiguratsiya fayli orqali taqdim etadi. Bu konfiguratsiya ulashiladigan modullarni va ularning mos keladigan kirish nuqtalarini belgilaydi.
2. Modullarni Iste'mol Qilish: "Host" yoki "konteyner" ilovasi sifatida sozlangan boshqa bir mikro-frontend masofaviy ilovani bog'liqlik sifatida e'lon qiladi. U masofaviy ilovaning modul federatsiyasi manifesti (taqdim etilgan modullarni tavsiflovchi kichik JSON fayl) joylashgan URL manzilini ko'rsatadi.
3. Ish Vaqtidagi Aniqlash: Host ilovasi masofaviy ilovadan modulni ishlatishi kerak bo'lganda, u masofaviy ilovaning modul federatsiyasi manifestini dinamik ravishda yuklab oladi. So'ngra Webpack modul bog'liqligini aniqlaydi va kerakli kodni ish vaqtida masofaviy ilovadan yuklaydi.
4. Kod Almashinuvi: Module Federation shuningdek, host va masofaviy ilovalar o'rtasida kod almashinuviga imkon beradi. Agar ikkala ilova ham umumiy bog'liqlikning bir xil versiyasidan (masalan, React, lodash) foydalansa, kod umumiy bo'ladi, bu esa takrorlanishning oldini oladi va paket hajmini kamaytiradi.

Module Federationni Sozlash: Amaliy Misol

Keling, Module Federationni ikkita mikro-frontendni o'z ichiga olgan oddiy misol bilan ko'rib chiqaylik: bir "Mahsulotlar Katalogi" va bir "Xarid Savatchasi". Mahsulotlar Katalogi mahsulotlar ro'yxati komponentini taqdim etadi, uni Xarid Savatchasi bog'liq mahsulotlarni ko'rsatish uchun iste'mol qiladi.

Loyiha Tuzilmasi

  
  micro-frontend-example/
    product-catalog/
      src/
        components/
          ProductList.jsx
        index.js
        webpack.config.js
    shopping-cart/
      src/
        components/
          RelatedProducts.jsx
        index.js
        webpack.config.js
  

Mahsulotlar Katalogi (Masofaviy)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'product_catalog',
        filename: 'remoteEntry.js',
        exposes: {
          './ProductList': './src/components/ProductList',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Tushuntirish:

• name: Masofaviy ilovaning noyob nomi.
• filename: Taqdim etiladigan kirish nuqtasi faylining nomi. Bu fayl modul federatsiyasi manifestini o'z ichiga oladi.
• exposes: Ushbu ilova tomonidan qaysi modullar taqdim etilishini belgilaydi. Bu holda, biz `src/components/ProductList.jsx` dan `ProductList` komponentini `./ProductList` nomi ostida taqdim etyapmiz.
• shared: Host va masofaviy ilovalar o'rtasida ulashilishi kerak bo'lgan bog'liqliklarni belgilaydi. Bu takrorlanuvchi kodning oldini olish va moslikni ta'minlash uchun juda muhim. `singleton: true` umumiy bog'liqlikning faqat bitta nusxasi yuklanishini ta'minlaydi. `eager: true` umumiy bog'liqlikni dastlab yuklaydi, bu esa ishlash samaradorligini oshirishi mumkin. `requiredVersion` umumiy bog'liqlik uchun qabul qilinadigan versiyalar diapazonini belgilaydi.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

      {products.map((product) => (
        
{product.name} - ${product.price}
      ))}
    
  );

  export default ProductList;
  

Xarid Savatchasi (Host)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'shopping_cart',
        remotes: {
          product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Tushuntirish:

• name: Host ilovasining noyob nomi.
• remotes: Ushbu ilova qaysi masofaviy ilovalardan modullarni iste'mol qilishini belgilaydi. Bu holda, biz `product_catalog` nomli masofaviy ilovani e'lon qilyapmiz va uning `remoteEntry.js` fayli joylashgan URL manzilini ko'rsatyapmiz. Format: `remoteName: 'remoteName@remoteEntryUrl'`.
• shared: Masofaviy ilovaga o'xshab, host ilovasi ham o'zining umumiy bog'liqliklarini belgilaydi. Bu host va masofaviy ilovalarning umumiy kutubxonalarning mos versiyalaridan foydalanishini ta'minlaydi.

src/components/RelatedProducts.jsx

  
  import React, { useEffect, useState } from 'react';
  import ProductList from 'product_catalog/ProductList';

  const RelatedProducts = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
      // Fetch related products data (e.g., from an API)
      const fetchProducts = async () => {
        // Replace with your actual API endpoint
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Related Products
        {products.length > 0 ?  : 
Loading...
}
      
    );
  };

  export default RelatedProducts;
  

Tushuntirish:

• import ProductList from 'product_catalog/ProductList'; Bu qator `product_catalog` masofaviy ilovasidan `ProductList` komponentini import qiladi. `remoteName/moduleName` sintaksisi Webpackga modulni ko'rsatilgan masofaviy ilovadan olishni buyuradi.
• Keyin komponent import qilingan `ProductList` komponentidan foydalanib, bog'liq mahsulotlarni ko'rsatadi.

Misolni Ishga Tushirish

1. Mahsulotlar Katalogi va Xarid Savatchasi ilovalarini o'zlarining ishlab chiqish serverlari yordamida ishga tushiring (masalan, `npm start`). Ularning turli portlarda ishlashiga ishonch hosil qiling (masalan, Mahsulotlar Katalogi 3001 portda va Xarid Savatchasi 3000 portda).
2. Brauzeringizda Xarid Savatchasi ilovasiga o'ting.
3. Siz Bog'liq Mahsulotlar bo'limini ko'rishingiz kerak, u Mahsulotlar Katalogi ilovasidan olingan `ProductList` komponenti tomonidan render qilinmoqda.

Module Federationning Ilg'or Konsepsiyalari

Asosiy sozlamalardan tashqari, Module Federation mikro-frontend arxitekturangizni yaxshilashi mumkin bo'lgan bir nechta ilg'or xususiyatlarni taklif etadi:

Kod Almashinuvi va Versiyalash

Misolda ko'rsatilganidek, Module Federation host va masofaviy ilovalar o'rtasida kod almashinuviga imkon beradi. Bunga Webpackdagi `shared` konfiguratsiya opsiyasi orqali erishiladi. Umumiy bog'liqliklarni belgilash orqali siz takroriy koddan qochishingiz va paket hajmini kamaytirishingiz mumkin. Umumiy bog'liqliklarni to'g'ri versiyalash moslikni ta'minlash va ziddiyatlarning oldini olish uchun juda muhimdir. Semantik versiyalash (SemVer) dasturiy ta'minotni versiyalash uchun keng qo'llaniladigan standart bo'lib, u sizga mos keladigan versiyalar diapazonlarini aniqlash imkonini beradi (masalan, `^17.0.0` 17.0.0 dan katta yoki teng, lekin 18.0.0 dan kichik har qanday versiyaga ruxsat beradi).

Dinamik Masofaviy Ilovalar

Oldingi misolda, masofaviy URL `webpack.config.js` faylida qat'iy belgilangan edi. Biroq, ko'plab real hayotiy stsenariylarda sizga ish vaqtida masofaviy URLni dinamik ravishda aniqlash kerak bo'lishi mumkin. Bunga promise-ga asoslangan masofaviy konfiguratsiyadan foydalanib erishish mumkin:

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Fetch the remote URL from a configuration file or API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

Bu sizga masofaviy URLni muhitga (masalan, development, staging, production) yoki boshqa omillarga qarab sozlash imkonini beradi.

Modullarni Asinxron Yuklash

Module Federation modullarni asinxron yuklashni qo'llab-quvvatlaydi, bu sizga modullarni talab bo'yicha yuklash imkonini beradi. Bu muhim bo'lmagan modullarni yuklashni kechiktirish orqali ilovangizning dastlabki yuklanish vaqtini yaxshilashi mumkin.

  
  // RelatedProducts.jsx
  import React, { Suspense, lazy } from 'react';

  const ProductList = lazy(() => import('product_catalog/ProductList'));

  const RelatedProducts = () => {
    return (
      

        
Related Products
        Loading...
}>
          
        
      
    );
  };
  

`React.lazy` va `Suspense` yordamida siz masofaviy ilovadan `ProductList` komponentini asinxron ravishda yuklashingiz mumkin. `Suspense` komponenti modul yuklanayotgan vaqtda zaxira UI (masalan, yuklanish indikatori) bilan ta'minlaydi.

Federatsiyalangan Stillar va Aktivlar

Module Federation, shuningdek, mikro-frontendlar o'rtasida stillar va aktivlarni ulashish uchun ham ishlatilishi mumkin. Bu ilovangiz bo'ylab bir xil ko'rinish va hissiyotni saqlashga yordam beradi.

Stillarni ulashish uchun siz masofaviy ilovadan CSS modullarini yoki styled-komponentlarni taqdim etishingiz mumkin. Aktivlarni (masalan, rasmlar, shriftlar) ulashish uchun siz Webpackni aktivlarni umumiy joyga ko'chirish va keyin ularga host ilovasidan murojaat qilish uchun sozlashingiz mumkin.

Module Federation uchun Eng Yaxshi Amaliyotlar

Module Federationni amalga oshirayotganda, muvaffaqiyatli va qo'llab-quvvatlanadigan arxitekturani ta'minlash uchun eng yaxshi amaliyotlarga rioya qilish muhim:

• Aniq Chegaralarni Belgilang: Qattiq bog'liqlikdan qochish va mustaqil joylashtirishni ta'minlash uchun mikro-frontendlar o'rtasidagi chegaralarni aniq belgilang.
• Aloqa Protokollarini O'rnating: Mikro-frontendlar o'rtasida aniq aloqa protokollarini belgilang. Hodisalar shinalari (event buses), umumiy holatni boshqarish kutubxonalari yoki maxsus API'lardan foydalanishni ko'rib chiqing.
• Umumiy Bog'liqliklarni Ehtiyotkorlik bilan Boshqaring: Versiya ziddiyatlaridan qochish va moslikni ta'minlash uchun umumiy bog'liqliklarni ehtiyotkorlik bilan boshqaring. Semantik versiyalashdan foydalaning va npm yoki yarn kabi bog'liqliklarni boshqarish vositasidan foydalanishni ko'rib chiqing.
• Mustahkam Xatoliklarga Ishlov Berishni Amalga Oshiring: Zanjir reaktsiyasidagi nosozliklarning oldini olish va ilovangiz barqarorligini ta'minlash uchun mustahkam xatoliklarga ishlov berishni joriy qiling.
• Ishlash Samaradorligini Kuzatib Boring: Qiyinchiliklarni aniqlash va ishlash samaradorligini optimallashtirish uchun mikro-frontendlaringizning ishlashini kuzatib boring.
• Joylashtirishlarni Avtomatlashtiring: Izchil va ishonchli joylashtirishlarni ta'minlash uchun joylashtirish jarayonini avtomatlashtiring.
• Bir Xil Kodlash Uslubidan Foydalaning: O'qish qulayligi va qo'llab-quvvatlashni yaxshilash uchun barcha mikro-frontendlar bo'ylab bir xil kodlash uslubini qo'llang. ESLint va Prettier kabi vositalar bu borada yordam berishi mumkin.
• Arxitekturangizni Hujjatlashtiring: Barcha jamoa a'zolari tizimni va uning qanday ishlashini tushunishlarini ta'minlash uchun mikro-frontend arxitekturangizni hujjatlashtiring.

Module Federation va Boshqa Mikro-Frontend Yondashuvlari

Module Federation mikro-frontendlarni amalga oshirish uchun kuchli usul bo'lsa-da, u yagona yondashuv emas. Boshqa mashhur usullarga quyidagilar kiradi:

• Iframe'lar: Iframe'lar mikro-frontendlar o'rtasida kuchli izolyatsiyani ta'minlaydi, ammo ularni uzluksiz integratsiya qilish qiyin bo'lishi va ishlash samaradorligiga salbiy ta'sir ko'rsatishi mumkin.
• Veb Komponentlar: Veb komponentlar turli mikro-frontendlar bo'ylab ishlatilishi mumkin bo'lgan qayta foydalanishga yaroqli UI elementlarini yaratishga imkon beradi. Biroq, ularni amalga oshirish Module Federationga qaraganda murakkabroq bo'lishi mumkin.
• Yig'ish Vaqtidagi Integratsiya: Bu yondashuv barcha mikro-frontendlarni yig'ish vaqtida bitta ilovaga qurishni o'z ichiga oladi. Bu joylashtirishni soddalashtirishi mumkin bo'lsa-da, jamoa avtonomiyasini kamaytiradi va ziddiyatlar xavfini oshiradi.
• Single-SPA: Single-SPA - bu bir nechta bir sahifali ilovalarni bitta ilovaga birlashtirish imkonini beruvchi freymvork. U yig'ish vaqtidagi integratsiyaga qaraganda moslashuvchanroq yondashuvni taqdim etadi, ammo sozlash murakkabroq bo'lishi mumkin.

Qaysi yondashuvdan foydalanishni tanlash ilovangizning maxsus talablariga va jamoangizning hajmi va tuzilishiga bog'liq. Module Federation moslashuvchanlik, ishlash samaradorligi va foydalanish qulayligi o'rtasida yaxshi muvozanatni taklif etadi, bu esa uni ko'plab loyihalar uchun mashhur tanlovga aylantiradi.

Module Federationning Haqiqiy Hayotdagi Misollari

Garchi muayyan kompaniyalarning amaliyotlari ko'pincha maxfiy bo'lsa-da, Module Federationning umumiy tamoyillari turli sohalar va stsenariylarda qo'llanilmoqda. Quyida ba'zi potentsial misollar keltirilgan:

• Elektron Tijorat Platformalari: Elektron tijorat platformasi veb-saytning turli bo'limlarini, masalan, mahsulotlar katalogi, xarid savatchasi, to'lov jarayoni va foydalanuvchi hisobini boshqarish kabilarni alohida mikro-frontendlarga ajratish uchun Module Federationdan foydalanishi mumkin. Bu turli jamoalarga ushbu bo'limlar ustida mustaqil ishlash va platformaning qolgan qismiga ta'sir qilmasdan yangilanishlarni joylashtirish imkonini beradi. Masalan, *Germaniyadagi* jamoa mahsulotlar katalogiga e'tibor qaratishi, *Hindistondagi* jamoa esa xarid savatchasini boshqarishi mumkin.
• Moliyaviy Xizmatlar Ilovalari: Moliyaviy xizmatlar ilovasi savdo platformalari va hisobni boshqarish kabi nozik xususiyatlarni alohida mikro-frontendlarga izolyatsiya qilish uchun Module Federationdan foydalanishi mumkin. Bu xavfsizlikni kuchaytiradi va ushbu muhim komponentlarning mustaqil auditini o'tkazishga imkon beradi. Tasavvur qiling, *Londondagi* jamoa savdo platformasi xususiyatlariga ixtisoslashgan va *Nyu-Yorkdagi* boshqa jamoa hisobni boshqarish bilan shug'ullanadi.
• Kontentni Boshqarish Tizimlari (CMS): CMS dasturchilarga maxsus modullarni mikro-frontendlar sifatida yaratish va joylashtirishga imkon berish uchun Module Federationdan foydalanishi mumkin. Bu CMS foydalanuvchilari uchun katta moslashuvchanlik va sozlash imkoniyatini beradi. *Yaponiyadagi* jamoa maxsus tasvirlar galereyasi modulini yaratishi, *Braziliyadagi* jamoa esa ilg'or matn muharririni yaratishi mumkin.
• Sog'liqni Saqlash Ilovalari: Sog'liqni saqlash ilovasi elektron sog'liqni saqlash yozuvlari (EHR), bemor portallari va hisob-kitob tizimlari kabi turli tizimlarni alohida mikro-frontendlar sifatida integratsiya qilish uchun Module Federationdan foydalanishi mumkin. Bu o'zaro ishlash qobiliyatini yaxshilaydi va yangi tizimlarni osonroq integratsiya qilishga imkon beradi. Masalan, *Kanadadagi* jamoa yangi teletibbiyot modulini integratsiya qilishi, *Avstraliyadagi* jamoa esa bemor portali tajribasini yaxshilashga e'tibor qaratishi mumkin.

Xulosa

Module Federation mikro-frontendlarni amalga oshirish uchun kuchli va moslashuvchan yondashuvni taqdim etadi. Ilovalarga ish vaqtida bir-biridan kodni dinamik ravishda yuklash imkonini berish orqali, u haqiqatan ham mustaqil va komponentli frontend arxitekturalarini yaratishga imkon beradi. Garchi u ehtiyotkorlik bilan rejalashtirish va amalga oshirishni talab qilsa-da, kengaytiriluvchanlikning oshishi, tezroq ishlab chiqish sikllari va jamoa avtonomiyasining ortishi kabi afzalliklar uni katta va murakkab veb-ilovalar uchun jozibali tanlovga aylantiradi. Veb-dasturlash landshafti rivojlanishda davom etar ekan, Module Federation frontend arxitekturasi kelajagini shakllantirishda tobora muhim rol o'ynashga tayyor.

Ushbu maqolada bayon etilgan konsepsiyalar va eng yaxshi amaliyotlarni tushunib, siz Module Federationdan foydalanib, bugungi tez sur'atli raqamli dunyo talablariga javob beradigan kengaytiriladigan, qo'llab-quvvatlanadigan va innovatsion frontend ilovalarini yaratishingiz mumkin.